<script setup>
import {computed, onMounted, ref, watch, watchEffect} from "vue";

const props = defineProps({
  current: {
    type: Number,
  },
  size: {
    type: Number,
  },
  total: {
    type: Number,
  },
})

const emits = defineEmits(['handlePageChange'])

const page = ref({
  current: props.current,
  size: props.size,
  total: props.total,
})

function handleSizeChange(size){
  page.value.size = size
  emits('handlePageChange', page)
  console.log(page.value)
}

function handleCurrentChange(current){
  page.value.current = current
  emits('handlePageChange', page)
  console.log(page.value)
}

onMounted(()=>{
  console.log(props.current)
  console.log(page.value)
})

</script>

<template>
  <div style="flex: none; display: flex; flex-flow: row nowrap; align-items: center; height: 36px; border-top: #5cadff 1px solid;">
    <el-pagination
        ref="pagination"
        v-model:current-page="props.current"
        v-model:page-size="props.size"
        :page-sizes="[10, 20, 30, 50, 100]"
        size="default"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="props.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
    />
  </div>
</template>

<style scoped>

</style>